import React, { useRef } from 'react'

import Popup from '@/components/common/Popup'
import TitleBlock from '@/components/common/TitleBlock'

import './index.scss'

const RulePopup = (props) => {
  const Decorate = useRef(
    <img
      className="rule-popup__decorate"
      alt="rule-popup-decorate"
      src="http://fepublicty.tiyalive.com/tiya/activities/us-halloween/dialog-pk-bg-1@2x.png"
    />,
  ).current

  const Content = (
    <div className="rule-popup__content">
      {/* <TitleBlock title={`${props?.RankList?.length ? `Ranking Rules` : 'Activity Rules'}`} /> */}
      <TitleBlock title={`Rules`} /> 

      <div className="rule-popup__context">
        <p className="rule-popup__text">
          {/* 1. Ranking Period: 2021/10/21-2021/10/28 <span style={{'white-space':'nowrap'}}>(UTC-5)</span> */}
        </p>
        {props?.RankList?.length ? (
          props.RankList.map((item) => {
            return (
              <p className="rule-popup__text" key={item}>
                {item}
              </p>
            )
          })
        ) : (
          <>
            <div className="rule-popup__text">
              1. Event Time (UTC-5): <br />
              <p className="rule-popup__text-sub">
                Halloween Event: Oct 21, 2021 - 31 Oct, 2021; <br />
                Collecting Treasure Map: Oct 21, 2021 - Oct 28, 2021; <br />
                Watch Together: Oct 29, 2021 - Oct 31, 2021
              </p>
            </div>

            <div className="rule-popup__text">
            2. Treasure Map Hunt Event:  <br />
              <p className="rule-popup__text-sub">
                <div>A. Complete various tasks to collect pieces of the treasure map and receive candies which can be used to redeem rewards.</div>
                <div>B. Each piece of the treasure map corresponds to a different task. Users will need to finish the corresponding task in order to collect the map piece. You can only collect 1 piece of treasure map per day.</div>
                <div>C. Task Requirements: Use the screen sharing function in the designated room for a certain period of time. Key point: </div>
                <div>When the number of people in the room is more than 2, then the duration of the room can be counted as valid.</div>
                <div>D. Users who succeeds in restoring the treasure map will receive Robux rewards along with the exclusive Halloween avatar frame</div>
                <div>E. The duration of the time spent using screen sharing during the event will be included in the list of "The Strongest Sharing Nova" ranking. The top users will have a chance to receive additional bonuses.</div>
              </p>
            </div>

            <div className="rule-popup__text">
              3. Watch Together Rules: <br />
              <p className="rule-popup__text-sub">
              <div>A. Sign in to get candies which can be redeemed for rewards </div>
              <div>B. Enter the corresponding room according to schedule on the event page, watch and join live streaming
                related to Halloween </div>
              </p>
            </div>

            <div className="rule-popup__text">4. The final interpretation right of this event belongs to the TIYA team.</div>
            <div className="rule-popup__text">5. This event has no affiliation with Apple Inc. or Google.</div>
          </>
        )}
      </div>
    </div>
  )

  return (
    <Popup
      status={props.status}
      needCloseBtn
      needMaskClose
      needStereoscopic
      decorate={Decorate}
      content={Content}
      handleClose={props.handleClose}
    />
  )
}

RulePopup.defaultProps = {
  handleClose: () => {},
}

export default RulePopup
